<template>
    <div class="hotWords">
        <div class="topHeader">
            <!-- <img src="@/assets/images/home/home1.png" alt=""> -->

            <img src="@/assets/images/home/home1-2.png" alt="">
        </div>
        <div class="search">
            <van-field class="inputBox" v-model="value" placeholder="输入您想查找的内容">
                <template #label>
                    <van-icon name="search" size=".36rem" />
                </template>
            </van-field>
            <p @click="handelCancel">取消</p>
        </div>
        <div class="imgBox">
            <img src="@/assets/images/product/14.png" alt="">
        </div>
    </div>
</template>
<script>
export default {
    name: 'hotWords',
    data() {
        return {
            value: ''
        }
    },
    methods: {
        handelCancel() {
            this.$router.push('/home')
        }
    },
}
</script>
<style lang="less" scoped>
.hotWords {
    height: 100%;
    background: #fff;
}
.topHeader {
    padding: .2rem .32rem 0;
    img {
        width: 100%;
        display: block;
    }
}
.imgBox {
    padding: 0 .3rem;
    margin-top: .63rem;
    img {
        width: 100%;
    }
}
.inputBox {
    width: 6.04rem;
    height: 0.72rem;
    display: flex;
    background: #F5F6F9;
    border-radius: 0.2rem;
    align-items: center;
    /deep/.van-field__label {
        width: .4rem;
    }
}
.search {
    margin-top: .28rem;
    display: flex;
    padding: 0 .3rem;
    justify-content: space-between;
    align-items: center;
    p {
        font-weight: normal;
        font-size: 0.28rem;
        color: #1552F9;
        line-height: 0.36rem;
        text-align: left;
        font-style: normal;
    }
}
</style>
